<template>
  <div>
    <button @click="goToIndex">首 页</button>
    <el-table
        :data="tableData"
        style="width: 100%"
        @scroll="handleScroll"
    >
      <!-- 这里添加你的表格列定义 -->
      <el-table-column
          prop="propertyName"
          label="列名"
      ></el-table-column>
      <!-- ... 其他列 ... -->
    </el-table>

    <!-- 加载更多的提示 -->
    <div v-if="isLoading" style="text-align: center; margin-top: 20px;">
      正在加载...
    </div>

    <!-- 没有更多数据的提示 -->
    <div v-if="noMoreData" style="text-align: center; margin-top: 20px;">
      没有更多数据了
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 存储表格数据的数组
      page: 1, // 当前页码
      pageSize: 10, // 每页显示的记录数
      isLoading: false, // 是否正在加载数据
      noMoreData: false, // 是否没有更多数据
    };
  },
  created() {
    this.fetchUserRecords()
  },
  methods: {
    goToIndex() {
      this.$router.push('/index'); // 或者使用命名路由：this.$router.push({ name: 'PageB' });
    },
    getUserName() {
      return this.$store.state.user.username
    },
    getPageNo() {
      return this.$store.state.record.pageNo
    },
    getPageSize() {
      return this.$store.state.record.pageSize
    },
    getRecords() {
      return this.$store.state.record.records
    },
    // 假设有一个从后端获取数据的函数 fetchUserRecords
    fetchUserRecords() {
      this.isLoading = true;
      // 模拟异步请求，你可以替换成实际的API调用
      this.$store.dispatch('Record', this.getUserName(), this.getPageNo(), this.getPageSize()).then(() => {
        const newData = this.getRecords()
        console.log("分页请求成功 " + newData[0].createdTime)
        setTimeout(() => {
          // 假设这里是从后端获取的数据
          // 合并新数据到表格数据中
          this.tableData = this.tableData.concat(newData);
          // 检查是否还有更多数据
          if (newData.length < this.pageSize) {
            this.noMoreData = true;
          }
          this.page++; // 更新页码
          this.isLoading = false; // 停止加载状态
        }, 1000); // 假设API调用需要1秒
      }).catch(() => {
        console.log("分页请求失败")
      })
    },
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      // 当滚动到接近底部时加载更多数据
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        if (!this.isLoading && !this.noMoreData) {
          this.fetchUserRecords();
        }
      }
    },
    // 组件加载时获取初始数据
    created() {
      this.fetchUserRecords();
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加你的样式 */
</style>